<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../EaselJS/lib/easeljs-0.8.2.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="550" height="400">
    easeljs简单使用
</canvas>
<script type="text/javascript">
    window.onload=function(){
        //获取stage
        var canvas = document.getElementById("myCanvas");
        var stage = new createjs.Stage(canvas);
        function circle(){
            //生成圆形
            var circle = new createjs.Shape();
            circle.graphics.beginFill("orange").drawCircle(0, 0, 50);
            //以下方式可以方便的修改图形相关的属性
            //修改图形坐标
            circle.x = Math.floor(Math.random() * 200);
            circle.y = Math.floor(Math.random() * 350);

            //修改图形缩放
            circle.scaleX = Math.floor(Math.random() * 2)+1;
            circle.scaleY = Math.floor(Math.random() * 2)+1;

            //修改alpha和旋转
            circle.alpha = Math.random() * 1;
            circle.rotation = Math.floor(Math.random() * 60);

            //设置图形相关的鼠标事件
            circle.on("click",handleClick,null,false);
            circle.on("mouseout",handleMouseOut,null,false);

            //将生成图形添加到stage中，并且调用update方法更新
            stage.addChild(circle);
            stage.update();
        }

        function handleClick(e){
            alert("已经点击了圆形");
        }

        function handleMouseOut(e){
            console.log("鼠标移出了圆形");
        }

        //生成5个不同的圆形
        for(var i=0;i<50;i++){
            circle();
        }

    }
</script>
</body>
</html>